<template>
  <div class="campus-selection">
    <!-- 导航栏 -->
    <van-nav-bar 
      title="院区列表" 
      left-arrow 
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="ellipsis" size="20" />
        <van-icon name="question-o" size="20" style="margin-left: 12px" />
      </template>
    </van-nav-bar>

    <!-- 主要内容 -->
    <div class="content-wrapper">
      <div class="tips">请选择院区</div>

      <!-- 院区列表 -->
      <div class="campus-list">
        <div 
          v-for="campus in campusList" 
          :key="campus.id"
          class="campus-item"
          @click="selectCampus(campus)"
        >
          <div class="campus-icon">
            <van-icon name="location-o" size="32" color="#fff" />
          </div>
          <div class="campus-info">
            <div class="campus-name">{{ campus.name }}</div>
            <div class="campus-address">{{ campus.address }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

interface Campus {
  id: string
  name: string
  address: string
}

const router = useRouter()

// 院区列表数据
const campusList = ref<Campus[]>([
  {
    id: '1',
    name: '四川省保健院南苑',
    address: '四川省成都市锦江区画溪路666号'
  },
  {
    id: '2',
    name: '四川省保健院北苑',
    address: '四川省成都市锦江区画溪路666号'
  },
  {
    id: '3',
    name: '四川省保健院体检中心',
    address: '四川省成都市锦江区画溪路666号'
  }
])

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 选择院区
const selectCampus = (campus: Campus) => {
  console.log('选择院区:', campus)
  // 可以将选择的院区信息存储到状态管理或者通过路由传递
  // 然后跳转到下一步
  // router.push({ path: '/next-page', query: { campusId: campus.id } })
}
</script>

<style scoped>
.campus-selection {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.content-wrapper {
  padding: 16px;
}

.tips {
  font-size: 16px;
  color: #323233;
  margin-bottom: 16px;
  padding-left: 4px;
}

.campus-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campus-item {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid #90caf9;
}

.campus-item:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.campus-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
}

.campus-info {
  flex: 1;
  min-width: 0;
}

.campus-name {
  font-size: 17px;
  font-weight: 600;
  color: #1976d2;
  margin-bottom: 6px;
  line-height: 1.4;
}

.campus-address {
  font-size: 14px;
  color: #546e7a;
  line-height: 1.5;
  word-break: break-all;
}
</style>

